<template>
    <div class="backupSetting">
        <div class="ibox-title">
            <h1>代理人设置</h1>
        </div>
        <div class="ibox-centent">
            <div class="row" >
                <div class="search" style="width:55%">
                    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                        <el-form-item label="代理人" class="backupArea" prop='name' style="position:relative">
                            <el-input disabled placeholder="请查询" v-model="form.name" class="fa fa-menu" ></el-input><i @click="searchPeo" class="searchBtn fa fa-search"></i>
                        </el-form-item>
                        <!-- <el-form-item label="代理流程">
                            <el-select v-model="form.excuteType" placeholder="请选择">
                                <el-option label="全部流程" value=""></el-option>
                                <el-option label="请假流程" value="QJ"></el-option>
                                <el-option label="销假流程" value="XJ"></el-option>
                            </el-select>
                        </el-form-item> -->
                        <el-form-item label="代理类型" prop='excuteType'>
                            <el-select v-model="form.excuteType" placeholder="请选择">
                                <el-option label="转交" value="1"></el-option>
                                <el-option label="委托" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="代理时间" prop='startTime'>
                            <el-col :span="11">
                            <el-date-picker type="date" placeholder="开始时间" v-model="startDate" @change="changeStart" style="width: 100%;"></el-date-picker>
                            </el-col>
                            <el-col class="line" style="text-align:center" :span="2">-</el-col>
                            <el-col :span="11">
                            <el-date-picker type="date" placeholder="结束时间" v-model="endDate" @change="changeEnd" style="width: 100%;"></el-date-picker>
                            </el-col>
                        </el-form-item>
                        <!-- <el-form-item label="代理类型">
                            <el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
                        </el-form-item> -->
                        <el-form-item label="代理说明" prop='instruction'>
                            <el-input v-model="form.instruction"></el-input>
                        </el-form-item>

                        <el-form-item label="备注">
                            <el-input v-model="form.remark"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <span class="btn" @click="submitForm">
                                新增
                            </span>
                            <span class="reset" @click="reset">
                                重置
                            </span>
                        </el-form-item>
                    </el-form>


                </div>
                <div class="tt">
                    <el-table :data="tableData" style="width: 100%">


                        <el-table-column property="type" label="代理类型" min-width="100">
                            <template scope="scope">
                                <span>{{scope.row.type | handleType }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column property="confExplain" label="代理说明" min-width="80">

                        </el-table-column>
                        <el-table-column property="agentName" label="代理人" width="80">
                        </el-table-column>
                        <el-table-column property="startTime" label="开始时间" min-width="70">
                            <template scope="scope">
                                <span>{{scope.row.startTime | handleDisplayDate}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column property="endTime" label="结束时间" min-width="90">
                            <template scope="scope">
                                <span>{{scope.row.endTime | handleDisplayDate}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column property="remark" label="备注" min-width="90">
                        </el-table-column>
                        <!-- <el-table-column property="status" label="状态" min-width="90">
                            <template scope="scope">
                                <span :class="{'color':handleDisStatus(scope.row.status) === '生效中'}">{{handleDisStatus(scope.row.status)}}</span>
                            </template>
                        </el-table-column>    -->
                        <!-- <el-table-column property="principalName" label="创建人" min-width="90">
                        </el-table-column> -->
                        <el-table-column label="操作" min-width="100">
                            <template scope="scope">

                                <!--<span class="color" @click="modify(scope.row)">
                                    修改
                                </span>-->
                                <span class="disableColor" v-if="scope.row.type == 3"  title="删除">
                                    删除
                                </span>                                
                                <span class="color" v-else  @click="deleteItem(scope.row.id)" title="删除">
                                    删除
                                </span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

            </div>

            <!-- <div class="block">
                <span class="displayShow">共 {{totalNum}} 条记录</span>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-sizes="[10,20,50,100, 200]" :page-size.sync="pageSizeTable" layout="sizes,prev, pager, next" :total="totalNum">

                </el-pagination>
            </div> -->

        </div>

		<peo-sel v-if="showPeo" :showPeo.sync="showPeo" :resultPeo.sync="resultPeo"> </peo-sel>

        <el-dialog :lock-scroll="lockFalse" title="修改" :visible.sync="dialogModifyVisible">
            <div class="search" >
                <el-form ref="form"  :model="modifyForm" label-width="80px">
                    <el-form-item label="代理人" class="backupArea" style="position:relative">
                        <el-input disabled placeholder="请查询" v-model="modifyForm.emplName" class="fa fa-menu" ></el-input><i @click="searchPeo" class="searchBtn fa fa-search"></i>
                    </el-form-item>
                    <el-form-item label="代理流程">
                        <el-select v-model="modifyForm.excuteType" placeholder="请选择">
                            <el-option label="全部流程" value=""></el-option>
                            <el-option label="请假流程" value="QJ"></el-option>
                            <el-option label="销假流程" value="XJ"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="代理时间">
                        <el-col :span="11">
                        <el-date-picker type="date" placeholder="开始时间" v-model="modifyForm.startTime" @change="changeModiStart" style="width: 100%;"></el-date-picker>
                        </el-col>
                        <el-col class="line" style="text-align:center" :span="2">-</el-col>
                        <el-col :span="11">
                        <el-date-picker type="date" placeholder="结束时间" v-model="modifyForm.endTime" @change="changeModiEnd" style="width: 100%;"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="代理说明">
                        <el-input v-model="modifyForm.instruction"></el-input>
                    </el-form-item>

                    <el-form-item label="备注">
                        <el-input v-model="modifyForm.remark"></el-input>
                    </el-form-item>
                </el-form>


            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogModifyVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitModifyForm">确 定</el-button>
            </div>
        </el-dialog> 
    </div>
</template>

<script>
//import 'Mock/mock_data'
import Vue from "vue";
import {
    Input,
    Table,
    TableColumn,
    Tag,
    Radio,
    Pagination,
    Dialog,
    Form,
    FormItem,
    Select,
    Option,
    DatePicker,
    MessageBox,
    Message,
    Loading,
    Col,
    Checkbox,
    CheckboxGroup,
    Tooltip
} from "element-ui";


Vue.use(Input);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Form);
Vue.use(Tag);
Vue.use(Radio);
Vue.use(FormItem)
Vue.use(DatePicker)
Vue.use(Select);
Vue.use(Option);
Vue.use(Loading);
Vue.use(Col);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Tooltip);

import PeoSelect from '@/components/backSetting/choosePeo'

export default {
    components: {
		'peo-sel' : PeoSelect
    },
    data() {
        return {

            //创建 start
            dialogFormVisible:false,
            form: {
                emplid: '',
                instruction:'',
                remark:'',
                startTime:'',
                endTime:'',
                excuteType:'1',
                name:''
            },
            rules: {
                name: [
                    { required: true, message: '请选择代理人', trigger: 'change' },
                ],
                instruction: [
                    { required: true, message: '请输入说明', trigger: 'blur' }
                ],
                startTime: [
                    { type: 'date', required: true, message: '请选择开始日期', trigger: 'blur' }
                ],
                endTime: [
                    { type: 'date', required: true, message: '请选择结束时间', trigger: 'blur' }
                ],
                excuteType: [
                    {  required: true, message: '请至少代理类型', trigger: 'change' }
                ]
            },
            dialogModifyVisible:false,

            dialog2Visiable:false,

            tableData:[],

            startDate:null,
            endDate:null,

            modifyForm:{},
            modifyStartTime:null,
            modifyEndTime:null,
            lockFalse:true,
            
            showPeo:false,
            resultPeo:[],
            createSavePeo:[],
            modifyPeo:[],
        };
    },
    watch:{
		resultPeo:function(newVal,oldVal){
			console.log(newVal,"newVal")
			if (newVal.length>0) {
				if (!this.dialogModifyVisible) {
					this.createSavePeo = JSON.parse(JSON.stringify(newVal));
					this.form.name = newVal[0].name;
				} else {
					this.modifyPeo = JSON.parse(JSON.stringify(newVal));
					this.modifyForm.emplName = newVal[0].name;
				}
				
			} 
		}

    },
    filters:{

        handleDisplayDate:function(val){
            if (val) {
                if (val.split(' ').length>1) {
                    return val.split(' ')[0];
                }
                var dataObj = new Date(val)
                return dataObj.getFullYear() + "-" + (dataObj.getMonth() + 1) + "-" + dataObj.getDate() 
            } else {
                return ''
            }
        },
        handleType:function(val){
            return val == 1 ? '转交' : (val == 2 ? '委托' : "领导秘书");
        }
    },

    mounted: function() {

        this.getBeiAnList();
        
//      this.getDept();
    },
    methods: {
    	
    	searchPeo:function(){
    		if (!this.dialogModifyVisible) {
    			this.resultPeo = JSON.parse(JSON.stringify(this.createSavePeo));
    		} else {
    			this.resultPeo = JSON.parse(JSON.stringify(this.modifyPeo));
    		}
    		this.showPeo = true;
    	},

        // type===2 代表简表请求
        handleSizeChange(val) {
             this.currentPage=1;
            this.pageSizeTable = val;
            this.getLeaveList();
            // this.getLeaderListCommonAjax(2);            
        },
        handleCurrentChange(val) {
            // console.log(this.currentPage);
            this.currentPage = val;
            this.getLeaveList();
            // this.getLeaderListCommonAjax(2); 
        },

        reset:function(){
            this.startDate = '';
            this.endDate = '';
            this.form = {
                emplid: '',
                instruction:'',
                remark:'',
                startTime:'',
                endTime:'',
                excuteType:'1'
            }
            this.resultPeo = []
        },

        changeStart:function(val){
            console.log(val,'changeStart');
            this.form.startTime = val;

        },
        changeEnd:function(val){
            console.log(val,'changeEnd');
            this.form.endTime = val;
        },

        changeModiStart:function(val){
            this.modifyStartTime = val;
        },
        changeModiEnd:function(val){
            this.modifyEndTime = val;
        },


		testNull:function(){
			if (this.resultPeo.length < 1 || !this.form.name || !this.form.name.trim()) {
                Message({
                    message: '代理人不能为空',
                    type: 'warning'
                });	
                return false;
			}
			if (!this.form.startTime || !this.form.endTime) {
                Message({
                    message: '开始结束时间不能为空',
                    type: 'warning'
                });	
                return false;				
			}
			if (!this.form.instruction || !this.form.instruction.trim()) {
                Message({
                    message: '代理说明不能为空',
                    type: 'warning'
                });	
                return false;					
			}
			return true;
			
		},
		
		compareTime:function(start,end){
			console.log(new Date(start),new Date(end),new Date(start).getTime() - new Date(end).getTime(),'end');
			if (new Date(start).getTime() - new Date(end).getTime() > 0) {
                Message({
                    message: '开始时间不能大于结束时间',
                    type: 'warning'
                });	
                return false;					
			}
			return true;
		},

        alterUTC:function(val){

            // return (new Date(val)).toUTCString();

            var date = new Date(val);
            var y =  date.getUTCFullYear();    
            var m = date.getUTCMonth() ;
            var d = date.getUTCDate();
            // var h= date.getUTCHours();
            // var M = date.getUTCMinutes();
            // var s = date.getUTCSeconds();
            var utc = Date.UTC(y,m,d,0,0,0);
            return utc;
        },

        submitForm:function(){
        	
        	if (!this.testNull()) {
        		return;
        	}
        	
        	if (!this.compareTime(this.startDate,this.endDate)) {
        		return;
        	}
        	
            // var params = {
            //     agentId : this.resultPeo[0].emplid,
            //     instruction:this.form.instruction,
            //     remark:this.form.remark,
            //     startTime:this.form.startTime,
            //     endTime:this.form.endTime,
            //     excuteType:this.form.excuteType
            // }
            var params = {
                "agentId": this.resultPeo[0].emplid,
                "agentName": this.resultPeo[0].name,
                "endTime": this.alterUTC(this.form.endTime),
                "fromKey": "fromKeyAll",
                "fromName": "全部节点",
                "startTime": this.alterUTC(this.form.startTime),
                "subProcessKey": "subProcessKeyAll",
                "subProcessName": "全部工作流",
                "type": this.form.excuteType,
                confExplain:this.form.instruction,
                remark:this.form.remark,
                status:1
            };

            this.Axios.Post(this.URL.addHrDLNew.url,params)
                .then((res)=>{
                    if (res.data.status === 1){
                        Message({
                            message: res.data.message || '新增成功',
                            type: 'success'
                        });
                        this.getBeiAnList();
                    }
                })
        },

		testModiNull:function(){
			if (!this.modifyForm.emplid) {
                Message({
                    message: '代理人不能为空',
                    type: 'warning'
                });	
                return false;
			}
			if (!this.modifyStartTime || !this.modifyEndTime) {
                Message({
                    message: '开始结束时间不能为空',
                    type: 'warning'
                });	
                return false;				
			}
			if (!this.modifyForm.instruction || !this.modifyForm.instruction.trim()) {
                Message({
                    message: '代理说明不能为空',
                    type: 'warning'
                });	
                return false;					
			}
			return true;
			
		},
		
        submitModifyForm:function(){
        	
    		if (!this.testModiNull()) {
        		return;
        	}
        	
        	if (!this.compareTime(this.modifyForm.startTime,this.modifyForm.endTime)) {
        		return;
        	}
        	
        	
            var params = {
                emplid: this.modifyPeo[0].emplid,
                instruction:this.modifyForm.instruction,
                remark:this.modifyForm.remark,
                startTime:this.modifyStartTime,
                endTime:this.modifyEndTime,
                excuteType:this.form.excuteType
            }
            this.Axios.Post(this.URL.addHrDL.url,params)
                .then((res)=>{
                    if (res.data.status === 1){
                        Message({
                            message: res.data.message || '修改成功',
                            type: 'success'
                        });
                        this.getBeiAnList();
                        this.dialogModifyVisible = false;
                    }
                })
        },

        getBeiAnList:function(){
            var params = {
                pageNo:1,
                pageSize:10000,
            }
            this.Axios.Post(this.URL.getHRDaiLiNew.url,params)
                .then((res)=>{
                    this.tableData = res.data.datas;
                })
        },

        modify:function(row){
        	
        	this.modifyPeo = [];
        	this.modifyPeo.push({
        		name:row.emplName,
        		emplid:row.emplid
        	});
        	
            this.modifyStartTime = row.startTime.split(' ')[0];
            this.modifyEndTime = row.endTime.split(' ')[0];

            this.modifyForm = row;
            this.dialogModifyVisible = true;
        },

        deleteItem:function(id){
            var params={
                id:id
            }
            MessageBox.confirm('是否确认删除?', '确认', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.Axios
                        .Post(this.URL.deleteHRDaiLiNew.url,params)
                        .then((res)=>{
                            if (res.data.status === 1){
                                Message({
                                    message: res.data.message || '删除成功',
                                    type: 'success'
                                });
                                this.getBeiAnList();
                            }
                        })                    
                }).catch(() => {

                });

        },

        handleDisStatus:function(val,time){
            if (!val) {
                return '已失效'
            } else {
                return '生效中'
            }

        },



    },

    beforeDestroy: function() {

    }
};
</script>

<style scoped>
.dialog {
    background-color: #fff;
    padding: 100px;
}
.backupSetting .confirmExportYear{
    float: right;
    width: 80px;
    display: inline-block;
    height: 36px;
    line-height: 36px;
    background-color: #0066CC;
    color: #fff;
    border-radius:5px;
    text-align:center;
    margin-left:5px;
}

.backupSetting .calcSearchBtn{
	width:140px;
	
}

.backupSetting .first-title h3 {
    font-size: 24px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: 500;
    line-height: 1.1;
}
.backupSetting .select{
    height: 36px;
    width: 100%;
    border: 1px solid #bfcbd9;
}
.backupSetting .second-sec {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid #d2d6de;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    border-top-color: #00a65a;
}

.deg-contain {
    border: 1px solid #8391a5;
    min-height: 60px;
    border-radius: 6px;
}

.content-right {
    float: right;
    margin-top: 17px;
}

.backupSetting .select-dept {
    font-size: 14px;
}

.backupSetting .display-title {
    border-bottom: 1px solid #f4f4f4;
    padding: 10px;
}

.backupSetting .switch-btn {
    padding: 10px 10px;
}

.backupSetting .collapse-card {
    padding: 10px 10px;
    border-bottom: 1px solid #f4f4f4;
}

.backupSetting .third-card {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid #3c8dbc;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.backupSetting .third-card .collapse-card .box-title {
    display: inline-block;
    font-size: 18px;
    color: #444;
    font-weight: 500;
    margin: 0;
    line-height: 1;
}

.backupSetting .third-card .collapse-card .box-title .box-header>.box-tools {
    position: absolute;
    right: 10px;
    top: 5px;
}

.backupSetting .third-card .collapse-card .collapse {
    border-radius: 3px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid transparent;
    padding: 5px;
    font-size: 12px;
    background: transparent;
    color: #97a0b3;
}




/*content*/

.backupSetting {
    clear: both;
    margin-top: 0;
    padding: 0;
    background-color:#F3F3F3;
    padding:20px 4%;
    min-height:100%;
}

.ibox-title {
    background-color: #ffffff;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-bottom-width: 2px 0 0;
    color: inherit;
    margin-bottom: 0;
    color: #6c6a6c;
    padding: 15px 15px 7px;
    min-height: 48px;
    font-size:18px;
}

.ibox-title h5 {
    display: inline-block;
    font-size: 14px;
    margin: 0 0 7px;
    padding: 0;
    text-overflow: ellipsis;
    float: left;
}

.ibox-tools {
    display: block;
    float: none;
    margin-top: 0;
    position: relative;
    padding: 0;
    text-align: right;
}

.ibox-tools a {
    cursor: pointer;
    margin-left: 5px;
    color: #c4c4c4;
}




/*ibox-centent*/

.ibox-centent {
    padding: 20px 10px 40px;
    clear: both;
    background-color: #ffffff;
    color: inherit;
    min-height: 500px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0;
}

.row {
    margin-right: -10px;
    margin-left: -10px;
}

.row .tt {
    padding: 0 60px;
    margin-top:20px;
}

.row .search {
    width: 100%;
    margin-bottom: 15px;
    padding-left: 12px;
    padding-right: 12px;
}

.row .search span {
    margin: auto 5px;
}

.color{
    color: #02A1EA;
    margin-right:10px;
}
.disableColor{
    color: #bfcbd9;
    margin-right:10px;
}
.row .search button {
    margin: auto 5px;
}
.row  .search .upload-con{
	margin-left:10px;
}


.row .search .btn {

    height: 34px;
    line-height: 34px;
    text-align: center;
    color: #fff;
    display: inline-block;
    background-color: #02A1EA;
    border-radius: 5px;
    min-width: 60px;
    margin-left:20px;
    cursor: pointer;
}
.row .search .reset{
    height: 34px;
    line-height: 34px;
    text-align: center;
    color: #02A1EA;
    display: inline-block;
    background-color: #fff;
    border-radius: 5px;
    min-width: 60px;
    cursor: pointer;

}
.modifyBtn {

    height: 24px;
    line-height: 24px;
    text-align: center;
    color: #fff;
    display: inline-block;
    background-color: #18a689;
    border-radius: 5px;
    padding: 4px;
}

.row .search .btn i {

    margin-right: 2px;
}



.row .search .wi {
    width: 20%;
}

.el-button {
    background: #1ab394;
    border: 1px solid #1ab394;
    color: #fff;
}

.search-l {
    width: 33.3333333%;
    margin-bottom: 5px;
}

.el-button .r {
    width: 66.66666667%;
}

.el-input-group__append .el-button {
    background: #1ab394;
    color: #fff;
    border: 1px solid #1ab394;
}




/*table*/

.el-table__header-wrapper thead div {
    background-color: #fff;
    color: #1f2d3d;
}

.btn-sp {
    padding-left: -10px;
}

.btn-sp>a {
    border: 1px solid #23c6c8;
    background: #23c6c8;
    color: #fff;
    border-radius: 3px;
    padding: 2px 9px;
    font-size: 12px;
    display: inline-block;
    margin-top: 5px;
}

.opt-btn-sp>a {
    border: 1px solid #18a689;
    background: #18a689;
    color: #fff;
    border-radius: 3px;
    padding: 2px 9px;
    font-size: 12px;
    display: inline-block;
    margin-top: 5px;
}

.delete>a {
    border: 1px solid #ec4758;
    background: #ec4758;
    color: #fff;
    border-radius: 3px;
    padding: 2px 9px;
    font-size: 12px;
    display: inline-block;
    margin-top: 5px;
}

.el-pagination {
    margin-top: 20px;
}




/*角色授权*/

.modal-content {
    background-clip: padding-box;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    outline: 0 none;
    position: relative;
}

.modal-header .close {
    margin-top: -2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.close {
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: black;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: 0.2;
}

.modal-title {
    margin: 0;
    line-height: 1.42857143;
}

.modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
    font-weight: 600;
    font-size: 14px;
}

.modal-body {
    padding: 20px 30px 30px 30px;
    position: relative;
}

.el-dialog__body {
    color: #48576a;
}

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

ul,
ol {
    margin-top: 0;
    margin-bottom: 10px;
}

input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 4px 0 0;
}

.input {
    border: none;
}

.input:focus {
    border: none;
    outline: none;
}

.title-modify {
    height: 40px;
    line-height: 40px;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
}

.modal-footer {
    margin-top: 0;
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}

.btn-primary {
    background-color: #1ab394;
    border-color: #1ab394;
    color: #ffffff;
    padding: 8px 13px;
    border-radius: 3px;
    border: 1px solid #1ab394;
    outline: none;
    cursor: pointer;
    font-size: 14px;
}

.modal-footer .btn+.btn {
    margin-bottom: 0;
    margin-left: 5px;
    color: inherit;
    background: white;
    border: 1px solid #e7eaec;
    padding: 8px 13px;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    font-size: 14px;
}




/* .btn-default {
    color: inherit;
    background: white;
    border: 1px solid #e7eaec;
} */

.glyphicon {
    position: relative;
    top: 3px;
    display: inline-block;
    font-family: "Glyphicons Halflings";
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}




/*图标*/

.glyphicon-off:before {
    content: "\e017";
}

.backupSetting .displayShow {
    display: inline-block;
    height: 32px;
}

.backupSetting .block {
    margin: 15px 5px;
    line-height: 32px;
}

.backupSetting .block>div {
    display: inline-block;
}
.backupSetting .searchBtn{
	position: absolute;
    top: 6px;
    font-size: 24px;
    right: 5px;
    color: #02A1EA;
    cursor:pointer;
}
</style>
<style>
/*修改element-ui样式*/


.backupSetting .calcDialog .deptSelect .el-form-item__content{
	width: calc(100% - 120px );
}


.backupSetting .el-radio-button__inner:hover {
    color: #333;
}
.backupSetting .halo-tree .label{
	margin-left:0px;
}

.backupSetting .el-radio-group .el-radio-button__inner:hover {
    background-color: #e7e7e7;
}

.backupSetting .el-radio-group .el-radio-button__inner {
    background-color: #f4f4f4;
}

.backupSetting .el-radio-group .is-active .el-radio-button__inner:hover {
    background-color: #d4d4d4 !important;
}




/*i*/

.backupSetting .el-menu--collapse>.el-submenu>.el-submenu__title [class^="el-icon-"] {
    margin: 0;
    vertical-align: middle;
    width: 14px;
    text-align: center;
}

.backupSetting .el-input-group--append .el-input__inner,
.backupSetting .el-input-group__prepend {
    border-width: 1px 0px 1px 1px;
}

.backupSetting .el-input-group__append .el-button[data-v-4fefba28] {
    border: 1px solid #1ab394;
    border-radius: 0px 3px 3px 0px;
    line-height: 0.99;
}




/*table*/

.backupSetting .el-table {
    border: none !important;
}

.backupSetting .el-table th {
    background: #fff !important;
    height: 52px !important;
    vertical-align: left !important;
}

.backupSetting .el-table__footer-wrapper thead div,
.backupSetting .el-table__header-wrapper thead div {
    background: #fff !important;
    border-right: none;
}

.backupSetting .el-table .cell {
    padding: 10px;
    cursor: pointer;
}

.backupSetting .el-table .cell>div {
    text-align: center;
}

.backupSetting .el-table__body-wrapper {
    overflow: auto !important;
}

.backupSetting .el-table .cell,
.backupSetting .el-table th>div {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.backupSetting .ibox-tools dh {
    background: red;
    display: inline-block;
}

.backupSetting .el-tag--success {
    margin-top: 3px;
}



.backupSetting .btn-primary:hover,
.backupSetting .btn-primary:focus {
    background-color: #18a689 !important;
}

.backupSetting .btn-default:hover {
    background-color: #e6e6e6 !important;
    cursor: pointer;
    border: 1px solid #d2d2d2 !important;
}

.backupSetting .el-form .el-form-item {
    width: 80%;
}
.backupSetting .calcDialog .el-form .el-form-item {
    width: 46%;
}
.backupSetting .calcDialog .el-form .el-form-item.deptSelect {
    width: 40%;
}
.backupSetting .calcDialog .el-form .el-form-item.deptSelect1 {
    width: 20%;
}
.backupSetting .calcDialog .el-form .el-form-item.deptSelect2 {
    width: 30%;
}
.backupSetting .calcDialog .dialog-footer{
	text-align:center;
    line-height: 70px;
    height: 49px;
}

.backupSetting .el-form .el-select {
    width: 100%;
}
.backupSetting .calcDialog  .el-form .el-select {
    width: 100%;
}
.backupSetting .calcDialog  .el-form .el-select .el-input{
    width: 100%;
}
.backupSetting .el-table__empty-block {
    width: 100% !important;
}
.backupSetting .el-table::after{
    width:0px;
}
.backupSetting .upload-con {
    display:inline-block;
    vertical-align:top;
    width:120px;
    height:44px;
    overflow: hidden;
}
.backupSetting .upload-con button{
    display:inline-block;
    height:44px;
    line-height:44px;
    text-align:center;
    vertical-align:top;
    font-size:14px;
}
.backupSetting .upload-con button span{
    display:inline-block;
    height:28px;
    line-height:28px;
    text-align:center;
    vertical-align:top;
    font-size:14px;
}
.backupSetting .el-table__header {
    width: 100% !important;
}
.backupSetting .backupArea .el-input__inner{
	padding-right:30px;
}
.backupSetting .el-date-editor.el-input{
    width:120px;
}
.backupSetting .calcDialog  .el-date-editor.el-input{
    width:100%;
}
.backupSetting .calcDialog .el-input{
	 width:100%;
}
/*.backupSetting .calcDialog .el-form{
	padding-left:20%;
	width:60%;

}*/
.backupSetting .calcDialog .el-form{

}
.backupSetting .calcDialog .el-tag{
	margin-right:5px;
}
.backupSetting .calcDialog .deptSearchIcon{

    height: 24px;
    background:#20a0ff;
    color:#fff;
    width: 50px;
    border-radius:5px;
    line-height: 24px;
    text-align: center;
}


.backupSetting .halo-tree>ul:first-child>li:first-child:before{
	content:none;
	border-left: 0px solid #50bfff;
	width:0px;
}

.backupSetting .halo-tree>ul:first-child>li:first-child::after{
	border-top:none;
	
}
</style>
